import React, { Component } from 'react';
import '../../scss/Allshopping.scss'
import { SearchOutlined } from '@ant-design/icons';
import { good_list } from "../../tools/api";
import { Skeleton } from 'antd-mobile';
    
class Allshopping extends Component {

    state = {
        sortArr:['综合','价格降序','价格升序','价格','筛选'],
        currentIndex:0,
        shoppingArr:[],
        biubiubiu:282659
    }

    render() {
        return (
            <div className='allshopping'>
                <div className="top">
                    <h3>全部商品</h3>
                </div>

                <div className="search">
                    <i><SearchOutlined /></i>
                    <input type="text" placeholder='搜索店铺内商品'/>
                </div>

                <div className="sort">
                    {
                        this.state.sortArr.map((item,index)=>{
                            return (
                                <span key={ index } onClick={ () => { this.currentQie(index) } } className={`spa ${this.state.currentIndex == index ? 'activemAX' : ''}`}>{ item }</span>
                            )
                        })
                    }
                </div>
                <div className="niubisho">
                   {
                    this.state.shoppingArr.length == 0 ?
                <>
                    <div className="anim">
                        <Skeleton.Title animated />
                        <Skeleton.Paragraph lineCount={18} animated />
                    </div>
                </>  :  
                     this.state.shoppingArr && 
                     this.state.shoppingArr.map((item,index)=>{
                        return (
                            //todo 处理
                            <div className="oneniubi" key={ index } onClick={ () => { this.showId(item) } }>
                                <div className="top">
                                    <img src={ item.pic } alt="" />
                                </div>
                                <div className="mine">{ item.name }</div>
                                <div className="bottom">
                                    <div className="top_max">
                                       
                                    </div>
                                    <div className="bottom_bottom">
                                        活动价￥ <span>{item.salesPrice.value}</span>
                                    </div>
                                </div>
                            </div>
                        )
                     })
                   }
                </div>
            </div>
        );
    }
    
    showId = (item) => {
        this.props.history.push({ pathname:'/particulars',state:{id:item.id} })
    }
    
    currentQie = (index) => {
        this.setState({ currentIndex:index });
        // 商品价格降序
        if( index == 1 ) {this.state.shoppingArr.sort((a,b)=> {return a.salesPrice.value - b.salesPrice.value})}
        // 商品价格升序
        if( index == 2 ) {this.state.shoppingArr.sort((a,b)=> {return b.salesPrice.value - a.salesPrice.value})} 
    }

    componentDidMount() { 
        good_list({id:this.props.location.state.id }).then( response => { this.setState({ shoppingArr:response.data.list })})
    }
    }
    // || 282659
export default Allshopping;